<template>
	<view class="page-cont">
		<navbar :title="devInfo&&devInfo.name?devInfo.name:`实时数据`" type="1" :selectList="devList" selectKey="name"
			@selectChange="handleDevChange">
		</navbar>

		<scroll-view :scroll-x="true" :show-scrollbar="false" class="control">
			<tab :tabActive="tabActive" :tabs="tabs" @tabChange="handleTabChange" :scroll="true"></tab>
		</scroll-view>

		<scroll-view class="main-cont" scroll-y>
			<view class="list-item" v-for="(item, index) in dataList" :key="index">
				<view class="list-item-top" :style="{'--circle-color': dsc[item.vs]}">{{item.name}}</view>
				<view class="list-item-bottom">
					<view class="list-item-box">
						<view class="list-item-row">
							<view class="list-item-row-title">数值：</view>
							<view class="list-item-row-right">
								<view class="list-item-row-num">{{item.value}}</view>
								<image class="list-item-row-icon" src="/static/temp_chart.png" @tap="toHistory(item)">
								</image>
								<!-- <image class="list-item-row-icon" src="/static/temp_chart.png"></image> -->
							</view>
						</view>
						<view class="list-item-row">
							<view class="list-item-row-title">备注：</view>
							<view class="list-item-row-detail">{{item.memo?item.memo:"-"}}</view>
						</view>
						<view class="list-item-row">
							<view class="list-item-row-title">更新时间：</view>
							<view class="list-item-row-detail">{{item.time}}</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<text v-if="dataList==null||dataList.length==0" class="empty-text">
			暂无相关数据~
		</text>

	</view>
</template>
<script setup lang="ts">
	import { reactive, ref, onMounted, getCurrentInstance, computed } from 'vue';
	import { onShow, onLoad } from "@dcloudio/uni-app";
	import { useNavbar } from "@/utils/hooks.js";
	import { storeToRefs } from 'pinia';
	import useUserStore from '@/store/user.js';
	import useHomeStore from '@/store/home';
	import * as dataApi from '@/api/data.js'
	const { proxy } = getCurrentInstance();
	const homeStore = useHomeStore();
	const { pageHeight, sysStatusBarHeight } = useNavbar();
	const { projectId } = storeToRefs(homeStore);

	const dsc = ref(['#DC143C', '#30d351', '#DAA520', '#1E90FF', '#1E90FF', '#FF4500']);

	onShow(() => {

	});

	onLoad(() => {

	});

	onMounted(() => {
		getDataInfo();
	})

	const devInfo = ref()
	const groupInfo = ref([])
	const devList = ref([])

	const handleDevChange = (item) => {
		devInfo.value = item;
		tabActive.value = 0;
		getGroupInfo();
	}

	const getDataInfo = async () => {
		devList.value = await dataApi.getDevInfoList({ "mid": projectId.value });
		if (devList.value.length) {
			devInfo.value = devList.value[0];
			getGroupInfo();
		}
	}

	const getGroupInfo = async () => {
		groupInfo.value = (await dataApi.getDevGroup({ "mid": projectId.value, "type": devInfo.value.type, "apid": devInfo.value.apid, "devid": devInfo.value.devid })).data

		tabs.value = groupInfo.value.map(element => {
			return element.name;
		});

		getDevData();
	}

	const dataList = ref([])
	const getDevData = async () => {
		dataList.value = [];
		let grpName = groupInfo.value[tabActive.value].items.map(element => {
			return element.grpName;
		})
		let name = groupInfo.value[tabActive.value].items.map(element => {
			return element.name;
		})
		let id = groupInfo.value[tabActive.value].items.map(element => {
			return element.id;
		})
		let params = {
			mid: projectId.value,
			type: devInfo.value.type,
			apid: devInfo.value.apid,
			devid: devInfo.value.devid,
			groups: grpName,
			names: name,
			ids: id,
		};

		//过滤掉null
		dataList.value = (await dataApi.getDevData(params)).data.filter(item => item !== null);

		dataList.value.forEach(item => {
			item.value = item.value !== undefined ? item.value.toFixed(2) : "-"
			item.time = item.timestamp !== undefined ? proxy.dayjs(item.timestamp).format('YYYY-MM-DD HH:mm:ss') : "-"
			groupInfo.value[tabActive.value].items.forEach(groupsItem => {
				if (groupsItem.id == item.id) {
					item.memo = groupsItem.memo;
				}
				item.vs = (1 == item.connState) ? (item.value != "-" ? 1 : 2) : 0;
			})
		})
		console.log(dataList)

	}

	const tabActive = ref(0)
	const tabs = ref([])

	// 项目类型切换
	const handleTabChange = async (e) => {
		tabActive.value = e;
		getDevData();
	}

	const toHistory = (item) => {
		uni.navigateTo({
			url: `/pages/data/history?mid=${projectId.value}&devid=${item.boxId}&key=${item.name}`
		})
	}
</script>
<style lang="scss" scoped>
	.page-cont {
		.main-cont {
			padding: 10px !important;
			box-sizing: border-box;
			height: 84vh;
		}

		.empty-text {
			display: absolute;
			top: 50%;
			left: 50%;
			// transform: translate(-50%, -50%);
			color: #999;
			font-size: 13px;
		}


		.list-item {
			margin-top: 10px;
			border-radius: 5px;
			background-color: #fff;

			&:first-child {
				margin-top: 0;
			}
		}

		.list-item-top {
			position: relative;
			padding: 6px 10px;
			padding-left: 28px;
			color: #333;
			font-size: 13px;
			font-weight: 600;
			border: 1px solid #fff;
			background-color: #EFF1F7;

			&::before {
				content: '';
				position: absolute;
				top: 11px;
				left: 10px;
				width: 8px;
				height: 8px;
				border-radius: 4px;
				// background-color: #75E0A8;
				background-color: var(--circle-color, #75E0A8);
			}
		}

		.list-item-bottom {
			padding: 10px;
		}

		.list-item-box {
			padding: 10px;
			border-radius: 5px;
			background-color: #F7F9FF;
		}

		.list-item-row {
			margin-top: 5px;
			display: flex;
			justify-content: space-between;

			&:first-child {
				margin-top: 0;
			}
		}

		.list-item-row-title {
			color: #999;
			font-size: 13px;
		}

		.list-item-row-right {
			display: flex;
			align-items: center;
		}

		.list-item-row-num,
		.list-item-row-detail {
			color: #666;
			font-size: 13px;
			font-weight: 600;
		}

		.list-item-row-icon {
			margin-left: 12px;
			width: 15px;
			height: 15px;
		}


		.control {
			// position: fixed;
			white-space: nowrap;
			overflow-x: auto;
			width: 100vw;
			z-index: 2;
			border-bottom: 1px solid #ccc;
		}

	}
</style>